<template>
  <div class="app-container">
    <el-form :inline="true" :model="searchForm" label-width="120px" class="demo-form-inline">
      <el-form-item label="省" >
        <el-select  v-model="searchForm.province" placeholder="省" >
          <el-option :label="p.name" :value="p.name" v-for="(p,i) in mixinsProvinceList" @click.native="mixinsProvinceChange(p.code)"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="市">
        <el-select v-model="searchForm.city" placeholder="市">
          <el-option :label="c.name" :value="c.name" v-for="(c,i) in mixinsCityList"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区">
        <el-select v-model="searchForm.area" placeholder="省">
          <el-option label="郫都区" value="郫都区"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="街道">
        <el-select v-model="searchForm.country" placeholder="省">
          <el-option label="街道" value="街道"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="自主服务点名称">
        <el-input v-model="searchForm.posName" placeholder="自主服务点名称"></el-input>
      </el-form-item>
      <el-form-item label="序列号">
        <el-input v-model="searchForm.serialCode" placeholder="序列号"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchForm.status" placeholder="状态">
          <el-option label="可用" value="1"></el-option>
          <el-option label="不可用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row>
      <el-button type="primary" icon="el-icon-plus" size="mini" plain @click="handleAdd">新建</el-button>
      <el-button
        type="success"
        plain
        icon="el-icon-edit"
        size="mini"
        :disabled="single"
        @click="handleUpdate"
      >修改</el-button>

      <el-button
        type="danger"
        plain
        icon="el-icon-delete"
        size="mini"
        :disabled="multiple"
        @click="handleDelete"
      >删除</el-button>

      <el-button
        type="warning"
        plain
        icon="el-icon-download"
        size="mini"
        :loading="exportLoading"
        @click="handleExport"
      >导出</el-button>
    </el-row>
    <br>
    <el-row>
      <el-table
        ref="multipleTable"
        :data="list"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="省"
          width="120">
          <template slot-scope="scope">{{ scope.row.province }}</template>
        </el-table-column>
        <el-table-column
          prop="city"
          label="市"
          width="120">
        </el-table-column>
        <el-table-column
          prop="area"
          label="区"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="country"
          label="街道"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="detailAddress"
          label="详细地址"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="serialCode"
          label="序列号"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="posName"
          label="服务点名称"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="serialCode"
          label="序列号"
          show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="status"
          label="状态"
          width="100">
          <template slot-scope="scope">
<!--            <el-tag
              :type="scope.row.status === '1' ? 'primary' : 'success'"
              disable-transitions>{{scope.row.status==='1'?'可用':'不可用'}}</el-tag>-->
            <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <br>
    <el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchForm.pageNum"
        :page-sizes="[1, 20, 100, 200]"
        :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-row>
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible"  width="700px">
      <el-form :model="form" ref="posForm" :rules="rules" label-width="auto">
        <el-form-item label="省" prop="province">
          <el-select v-model='form.province' filterable placeholder="请选择省" >
            <el-option label="四川省" value="四川省"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市" prop="city">
          <el-select v-model='form.city' filterable placeholder="请选择市(请先选择省)" >
            <el-option label="成都市" value="成都市"></el-option>
            <el-option label="内江市" value="内江市"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区/县" prop="area">
          <el-select v-model='form.area' filterable placeholder="请选择区/县(请先选择市)" >
            <el-option label="郫都区" value="郫都区"></el-option>
            <el-option label="锦江区" value="锦江区"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="乡镇/街道" prop="country">
          <el-select v-model='form.country' filterable placeholder="请选择乡镇/街道(请先选择区/县)" >
            <el-option label="郫筒街道" value="郫筒街道"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址" prop="detailAddress">
          <el-input v-model="form.detailAddress" placeholder="请输入详细地址" />
        </el-form-item>
        <el-form-item label="自主服务点名称" prop="posName">
          <el-input v-model="form.posName" placeholder="请输入自主服务点名称" />
        </el-form-item>
        <el-form-item label="序列号" prop="serialCode">
          <el-input v-model="form.serialCode" placeholder="请输入序列号" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio-button :label="1">可用</el-radio-button>
            <el-radio-button :label="0">禁用</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPos">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getList} from "@/api/certificate/pos.js";
import {AreaMixins} from "@/mixins/AreaMixins";

export default {
  name: "Pos",
  mixins:[AreaMixins],
  dicts: ['sys_normal_disable','sys_job_status'],
  data() {
    return {
      dialogFormVisible: false,
      form: {
        id: null,
        province: null,
        city: null,
        area: null,
        country: null,
        detailAddress: null,
        posName: null,
        serialCode: null,
        status: 0,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      },
      formLabelWidth: '120px',
      total:0,
      searchForm: {
        pageNum:1,
        pageSize:10,
        province: "",
        city: "",
        area: "",
        posName: "",
        serialCode: "",
        status: ""
      },
      list: [],
      ids: [],
      rules: {
        province: [
          { required: true, message: '请选择省份', trigger: 'blur' },
        ],
        city: [
          { required: true, message: '请选择城市', trigger: 'blur' },
        ],
        area: [
          { required: true, message: '请选择区', trigger: 'blur' },
        ]
      }
    };
  },
  created() {
      this.getList();
  },
  methods: {
    handleUpdate(){
      let selectedFirstId = this.ids[0];
      //根据id在表格列表中获取对应的对象
      let target = this.list.find(obj=>obj.id === selectedFirstId);
      this.form = Object.assign({}, target);
      this.dialogFormVisible= true;
    },
    handleDelete(index, row) {
      //判断是否有删除的数据
      let ids = row===undefined?this.ids:row.id;
      if (!ids||ids.length===0) {
        this.$message({
          type: 'warning',
          message: '请选择需要删除的数据'
        });
        return;
      }

      this.$confirm(`此操作将永久删除该服务点, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          url:"/certificate/pos/"+ids,
          method:"delete"
        }).then(res=>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getList();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleAdd() {
      this.restForm();
      this.dialogFormVisible= true;
    },
    handleEdit(index, row){
        //1.将当前行数据(副本)赋值给表单
        // this.form = JSON.parse(JSON.stringify(row))
        this.form = Object.assign({}, row);
        //2.打开对话框
        this.dialogFormVisible = true;
    },
    addPos(){
      //1.数据校验
      this.$refs['posForm'].validate((valid) => {
        if (valid) {
          if(!this.form.id){
            //2.将数据发送给服务器
            request({
              url: "/certificate/pos",
              method: "post",
              data: this.form
            }).then(res => {
              //清空表单
              this.restForm();
              //加载列表数据
              this.getList();
              //关闭弹窗
              this.dialogFormVisible = false;
            })
          }else {
            request({
              url:"/certificate/pos",
              method: "put",
              data:this.form
            }).then(res=>{
              //清空表单
              this.restForm();
              //加载列表数据
              this.getList();
              //关闭弹窗
              this.dialogFormVisible = false;
            })
          }
        } else {
          return false;
        }
      });
    },
    restForm(){
      this.form = {
        id: null,
        province: null,
        city: null,
        area: null,
        country: null,
        detailAddress: null,
        posName: null,
        serialCode: null,
        status: 0,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      }
    },
    getList(){
      getList().then(res=>{
        this.list = res.rows;
        this.total = res.total;
      })
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    },
    handleSelectionChange(val) {
      // this.ids = [];
      // for (let i = 0; i < val.length; i++) {
      //   let obj = val[i];
      //   this.ids.push(obj.id);
      // }

      this.ids = val.map(obj=>obj.id);
    }
  }
};
</script>
